import Taro, { Component, Config } from '@tarojs/taro'
import { Input, Image, View, ScrollView, Text } from '@tarojs/components'
import './index.scss'
import classNames from 'classnames'
// import { APP_TABBAR_HEIGHT } from "@/config/config"
import { getCategoryList } from '@/api/categoryApi'
import { toGoodsPage, toSearchPage } from '@/utils/page_router'
import { FyImg, Loading, LoadMore, TabBar, Version } from '@/components/index'
import { OSS, TAB_BAR_HEIGHT } from "@/config/config"
import { getPage, getCount } from "@/api/productApi"
import { getAppConfig, getAppletConfig, getRandomPage, getRandomPageNumber } from '@/utils/storage'
import ProductItem from './item'
import Aaa from './aaa'
import GoodsTwo from "@/components/custom-layout/goods-two";
import ScrollTop from "@/components/scroll-top"
import { formatAmount } from '@/utils/utils'

import GoodsMore from "@/assets/images/goods_list_more_cell.png"

import Calc from "@/utils/calc";

export default class Index extends Component {
  state: any
  config: Config = {
    backgroundTextStyle: "dark",
    onReachBottomDistance: 600
  }

  constructor() {
    super(...arguments)
    this.state = {
      loading: true,
      productList: [],
      loadStatus: 'loading',
      page: 1,
      limit: 9,
      totalCount: 0,
      zhiding: false,
      duihuanbi: true,
    }
  }

  componentDidMount() {
    getCount({}, 9).then(() => {
      this.getList()
    })
  }

  //  上拉加载
  onReachBottom() {
    this.getList()
  }

  //  获取数据
  getList() {
    const { page, limit, productList, loadStatus, totalCount }: any = this.state
    if (loadStatus === 'noMore') {
      return
    }
    if (totalCount > 18 && productList.length > 18) {
      this.setState({
        loadStatus: 'noMore'
      })
      return;
    }
    getPage({ page: getRandomPageNumber(), limit, type: 3 }).then(res => {
      const pageArr = getRandomPage()
      const { list, totalCount } = res.data

      this.setState({
        page: page,
        productList: !productList.length ? list : productList.concat(list),
        loadStatus: !pageArr.length ? 'noMore' : 'loading',
        loading: false,
        totalCount
      }, () => {
        Taro.stopPullDownRefresh()
      })
    })
  }

  onPageScroll(res: any) {
    if (res.scrollTop > 300) {
      this.setState({
        zhiding: true,
      })
    } else {
      this.setState({
        zhiding: false,
      })
    }
    if (res.scrollTop) {
      this.setState({
        duihuanbi: false,
      })
    } else {
      this.setState({
        duihuanbi: true,
      })
    }
  }

  showDuihuanbi() {
    this.setState({
      duihuanbi: true
    })
  }

  render() {
    const { loading, productList, loadStatus, zhiding, duihuanbi } = this.state
    return (
      // @ts-ignore
      <View className='popular-rank-page'>
        <ScrollTop ref="ScrollTop" zhiding={zhiding} duihuanbi={duihuanbi} showDuihuanbi={this.showDuihuanbi.bind(this)} />
        {loading && <Loading />}
        <View>
          <View>
            {/*<Image className='popular-bgImg' src={getAppConfig('popular-bgImg')} />*/}
            <FyImg className='popular-bgImg' src={getAppConfig('popular-bgImg')} />
            <View className='popular-price'>
              <Text className='price m-r-10'>{formatAmount(281053, '', true)}</Text>元
              {/*<Aaa/>*/}
            </View>
          </View>
          <ScrollView id='select-list' className='list'>
            {
              productList.map((item, index) => {
                return <View className='list-item' onClick={() => toGoodsPage(item)}>
                  {index < 6 && <FyImg className='list-item-top' src={`${OSS}/system/image/goods-top${index + 1}.png`} />}
                  <ProductItem info={item} />
                </View>
              })
            }
            {loadStatus === 'noMore' && <FyImg className='goods-more' src={GoodsMore} onClick={() => toSearchPage()} />}
            <LoadMore status={loadStatus} />
            {loadStatus === 'noMore' && <Version />}
          </ScrollView>
        </View>

        <TabBar />
      </View>)
  }
}
